<template>
	<view>
		<view class="skuScroll" v-if="specData && specData.length">
			<uni-table class="skuTab">
				<view class="thead">
					<uni-tr>
						<uni-th :colspan="specData.length" width="100">商品规格</uni-th>
						<uni-th width="150">
							<span class="cf5">*</span>
							<span>销售价格</span>
						</uni-th>
						<uni-th width="150">
							<span>划线价</span>

						</uni-th>
						<uni-th width="150">
							成本价
						</uni-th>
						<uni-th  width="170">
							包装费
						</uni-th>
						<uni-th width="170">
							初始库存
						</uni-th>
						<uni-th width="160">
							商品重量
						</uni-th>
						<uni-th width="150">商品条码</uni-th>
						<uni-th width="150">商品编码</uni-th>
					</uni-tr>
					<!-- <tr>
						<th v-for="(v, index) in specData" :key="index">{{ v.name }}</th>
					</tr> -->
				</view>
				<view class="tbody">
					<uni-tr v-for="(v, index) in group" :key="index">
						<uni-td v-for="(cv, ci) in v.specName" :key="ci" width="100">{{ cv.name }}</uni-td>
						<uni-td>
							<u-input placeholder="销售价格"  v-if="flag" v-model="v.price" @input.native="onInput($event)">
								<template slot="suffix">
									<template>元</template>
								</template>
							</u-input>
						</uni-td>
						<uni-td>
							<u-input placeholder="划线价" v-model="v.linePrice" @input.native="onInput($event)">
								<template slot="suffix">
									<template>元</template>
								</template>
							</u-input>
						</uni-td>
						<uni-td>
							<u-input placeholder="成本价格" v-model="v.costPrice" @input.native="onInput($event)">
								<template slot="suffix">
									<template>元</template>
								</template>
							</u-input>
						</uni-td>
						<uni-td>
							<u-input placeholder="包装费" v-model="v.boxMoney" @input.native="onInput($event)">
								<template slot="suffix">
									<template>元</template>
								</template>
							</u-input>
						</uni-td>
						<uni-td>
							<u-input placeholder="初始库存" type="number" v-model="v.inventory" @input.native="onInput($event)">
								<template slot="suffix">
									<u-switch  v-if="checkShow" v-model="v.dayFilling" :inactiveValue="0" :activeValue="1" :activeColor="subColor"
										size="20"  @change="onCheck($event)">
									</u-switch>
								</template>
							</u-input>
						</uni-td>
						<uni-td>
							<u-input placeholder="商品重量" v-model="v.component" @input.native="onInput($event)">
								<template slot="suffix">
									<template>克</template>
								</template>
							</u-input>
						</uni-td>
						<uni-td>
							<u-input placeholder="商品条码" v-model="v.barcode" @input.native="onInput($event)"></u-input>
						</uni-td>
						<uni-td>
							<u-input placeholder="商品编码" v-model="v.sn" @input.native="onInput($event)"></u-input>
						</uni-td>
					</uni-tr>
				</view>
			</uni-table>
		</view>
	</view>
</template>

<script>
	import {
		mapState,
	} from 'vuex'
	export default {
		components: {

		},
		props: {
			specData: {
				type: Array,
				default: () => []
			},
			parentGroup: {
				type: Array,
				default: () => []
			}
		},
		data() {
			return {
				subColor: uni.getStorageSync('subject_color'),
				visible1: null,
				visible2: null,
				visible3: null,
				visible4: null,
				visible5: null,
				visible6: null,
				pType: "",
				prices: "1",
				linePrices: "1",
				costPrices: "1",
				boxMoneys: "1",
				dayFillings: 0,
				inventorys: 999,
				components: "1",
				price: "0",
				linePrice: "0",
				costPrice: "0",
				boxMoney: "0",
				dayFilling: 1,
				inventory: 999,
				component: "0",
				sn: "",
				barcode: "",
				checkShow: true,
				flag: true,
			}
		},
		// computed: {
		// 	...mapState({
		// 		storeId: state => state.storeId,
		// 	}),
		// },
		methods: {
			mType(t) {
				this.pType = t;
			},
			syncKey() {
				let v = this.pType;
				switch (v) {
					case "prices":
						this.price = this[v];
						if (this.parentGroup.length) {
							this.parentGroup.forEach((item) => {
								item.price = this[v];
							});
						}
						this["visible1"].hide();
						break;

					case "linePrices":
						this.linePrice = this[v];
						if (this.parentGroup.length) {
							this.parentGroup.forEach((item) => {
								item.linePrice = this[v];
							});
						}
						this["visible2"].hide();
						break;

					case "costPrices":
						this.costPrice = this[v];
						if (this.parentGroup.length) {
							this.parentGroup.forEach((item) => {
								item.costPrice = this[v];
							});
						}
						this["visible3"].hide();
						break;

					case "boxMoneys":
						this.boxMoney = this[v];
						if (this.parentGroup.length) {
							this.parentGroup.forEach((item) => {
								item.boxMoney = this[v];
							});
						}
						this["visible4"].hide();
						break;

					case "inventorys":
						this.inventory = this[v];
						if (this.parentGroup.length) {
							this.parentGroup.forEach((item) => {
								item.inventory = this[v];
							});
						}
						this["visible5"].hide();
						break;

					case "components":
						this.component = this[v];
						if (this.parentGroup.length) {
							this.parentGroup.forEach((item) => {
								item.component = this[v];
							});
						}
						this["visible6"].hide();
						break;
				}
			},
			onInput(e) {
				this.flag = false
				// console.log(e.target.value);
				this.$forceUpdate();
				this.flag = true
			},
			onCheck() {
				this.checkShow = false;
				this.checkShow = true;
			},
		},
		watch: {
			parentGroup(newVal) {
				console.log("parentGroup", newVal);
				if (newVal.length > 0) {}
			},
		},
		computed: {
			group() {
				if (!this.specData.length) return [];
				let _result_arr = this.specData.map((_e) => _e["value"]);
				let _recursion_spec_obj = (data) => {
					let len = data.length;
					if (len >= 2) {
						let len1 = data[0].length;
						let len2 = data[1].length;
						let newlen = len1 * len2;
						let temp = new Array(newlen);
						let index = 0;
						for (let i = 0; i < len1; i++) {
							for (let j = 0; j < len2; j++) {
								if (Array.isArray(data[0][i])) {
									temp[index] = [...data[0][i], data[1][j]];
								} else {
									temp[index] = [data[0][i], data[1][j]];
								}
								index++;
							}
						}
						let newArray = new Array(len - 1);
						for (let i = 2; i < len; i++) {
							newArray[i - 1] = data[i];
						}
						newArray[0] = temp;
						return _recursion_spec_obj(newArray);
					} else {
						return data[0];
					}
				};
				const data = _recursion_spec_obj(_result_arr).map((item) => {
					let arr = [],
						img = [];
					item.length > 1 ?
						item.forEach((item) => {
							arr.push({
								id: item.id,
								name: item.name,
							});
						}) :
						arr.push({
							id: item.id,
							name: item.name,
						});
					item.length > 1 ?
						item.forEach((item) => {
							img = item.img;
						}) :
						(img = item.img);
					if (this.parentGroup.length) {
						return {
							specName: arr,
							price: (this.parentGroup.find(
										(v) => v.specName[0].id == arr[0].id
									) &&
									this.parentGroup.find(
										(v) => v.specName[0].id == arr[0].id
									).price) ||
								this.prices,
							component: (this.parentGroup.find(
										(v) => v.specName[0].id == arr[0].id
									) &&
									this.parentGroup.find(
										(v) => v.specName[0].id == arr[0].id
									).component) ||
								this.components,
							inventory: (this.parentGroup.find(
										(v) => v.specName[0].id == arr[0].id
									) &&
									this.parentGroup.find(
										(v) => v.specName[0].id == arr[0].id
									).inventory) ||
								this.inventorys,
							sn: (this.parentGroup.find(
										(v) => v.specName[0].id == arr[0].id
									) &&
									this.parentGroup.find(
										(v) => v.specName[0].id == arr[0].id
									).sn) ||
								this.sns,
							barcode: (this.parentGroup.find(
										(v) => v.specName[0].id == arr[0].id
									) &&
									this.parentGroup.find(
										(v) => v.specName[0].id == arr[0].id
									).barcode) ||
								this.barcodes,
							linePrice: (this.parentGroup.find(
										(v) => v.specName[0].id == arr[0].id
									) &&
									this.parentGroup.find(
										(v) => v.specName[0].id == arr[0].id
									).linePrice) ||
								this.linePrices,
							costPrice: (this.parentGroup.find(
										(v) => v.specName[0].id == arr[0].id
									) &&
									this.parentGroup.find(
										(v) => v.specName[0].id == arr[0].id
									).costPrice) ||
								this.costPrices,
							boxMoney: (this.parentGroup.find(
										(v) => v.specName[0].id == arr[0].id
									) &&
									this.parentGroup.find(
										(v) => v.specName[0].id == arr[0].id
									).boxMoney) ||
								this.boxMoneys,
							dayFilling: (this.parentGroup.find(
										(v) => v.specName[0].id == arr[0].id
									) &&
									this.parentGroup.find(
										(v) => v.specName[0].id == arr[0].id
									).dayFilling) ||
								this.dayFillings,
						};
					} else {
						return {
							specName: arr,
							value: img,
							component: this.component,
							inventory: this.inventory,
							sn: this.sn,
							price: this.price,
							barcode: this.barcode,
							linePrice: this.linePrice,
							costPrice: this.costPrice,
							boxMoney: this.boxMoney,
							dayFilling: this.dayFilling,
						};
					}
				});
				this.$emit("sku-data", data);
				return data;
			},
		},
	}
</script>

<style lang="scss" scoped>
	.skuScroll {
		white-space: nowrap;
		display: flex;
		width: 100%;
		margin-top: 20px;

		.skuTab {
			min-width: 1400px;
			text-align: center;
			border-top: 1px solid #e1e1e1;
			border-left: 1px solid #e1e1e1;
			border-collapse: collapse;

			.thead {
				tr {
					height: 50px;
					line-height: 50px;
					background: #f9fafc;

					th {
						height: 40px;
						text-align: center;
						border-right: 1px solid #e1e1e1;
						border-bottom: 1px solid #e1e1e1;
					}
				}
			}

			td {
				padding: 10px;
				border-right: 1px solid #e1e1e1;
				border-bottom: 1px solid #e1e1e1;
			}
		}
	}
</style>